/*
 * @Description: 文件合并弹窗
 * @Author: Zzt
 * @Date: 2022-10-29 11:43:18
 * @LastEditTime: 2022-11-02 19:22:59
 */
import { Button, Modal, Radio, RadioChangeEvent, Table } from 'antd';
import styles from '../../styles/mergeDialog.module.scss';
import classNames from 'classnames/bind';
import Column from 'antd/es/table/Column';
import { useEffect, useState } from 'react';
import { useLevelTableContext } from '../../contexts/LevelTableContext';

const cx = classNames.bind(styles);

interface IMergeDialogProps {
  visible: boolean;
  outIn: Array<[]>;
  onClose: any;
  selectItems: Array<[]>;
  baseInfo: any;
}
const MergeDialog = (props: IMergeDialogProps) => {
  const { visible, outIn, onClose, selectItems, baseInfo } = props;
  const { startMerge } = useLevelTableContext();
  const [value, setValue] = useState(0);

  // 表格选中的项目
  const [selectItem, setSelectKey] = useState([]);
  const [mergeList, setMergeList] = useState([]);

  useEffect(() => {
    setMergeList(outIn.filter((item: any) => selectItems.indexOf(item.id) >= 0));
    if (!visible) {
      setValue(0);
      setSelectKey([]);
      setMergeList([]);
    }
  }, [visible]);
  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };
  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItem,
    onChange: onSelectChange
  };
  /* 删除条目合并中的内容 */
  const delMergeList = () => {
    setMergeList((state) => state.filter((item: any) => selectItem.indexOf(item.id) < 0));
    setSelectKey([]);
  };
  /* 单选操作 */
  const onChange = (event: RadioChangeEvent) => {
    setValue(event.target.value);
  };
  /* 点击开始合并 */
  const onMerge = () => {
    const param = {
      atCode: baseInfo.atCode,
      atType: baseInfo.atType,
      commonParams: baseInfo.param.commonParams,
      level: baseInfo.level,
      sourceEntryIdList: mergeList.map((item) => item.id).filter((item) => item !== value),
      targetEntryId: value
    };
    startMerge(
      { ...param },
      mergeList.map((item) => item.id).filter((item) => item !== value)
    );
    onClose();
  };
  return (
    <Modal
      visible={visible}
      title="条目合并"
      onCancel={onClose}
      width={700}
      footer={[
        <Button onClick={onClose} key={'cancel'}>
          取消
        </Button>,
        <Button onClick={onMerge} key={'ok'} disabled={value === 0}>
          条目合并
        </Button>
      ]}
    >
      <div className={cx('text-bc')}>从待合并档案中选择一个予以保留，其余进入回收站</div>
      <div className={cx('op-bo')}>
        <b>合并档案列表</b>
        <Button
          className={cx('title-right')}
          onClick={delMergeList}
          disabled={selectItem.length === 0}
        >
          删除
        </Button>
        <Button className={cx('title-right')}>添加档案</Button>
      </div>
      <Table
        dataSource={mergeList}
        rowKey="id"
        rowSelection={rowSelection}
        pagination={false}
        bordered
        size="small"
      >
        <Column title="档号" align="center" key="arcno" dataIndex="arcno" />
        <Column title="题名" key="title" align="center" dataIndex="title" />
        <Column title="文号" width={70} align="center" key="documentNo" dataIndex="documentNo" />
        <Column title="年度" width={70} align="center" key="year" dataIndex="year" />
        <Column title="分类号" width={100} align="center" key="categoryNo" dataIndex="categoryNo" />
        <Column
          title="保管期限"
          width={110}
          align="center"
          key="retentionPeriod"
          dataIndex="retentionPeriod"
        />
        <Column
          title="操作"
          align="center"
          width={200}
          key="active"
          render={(_text, record: any) => (
            <Radio.Group name="radiogroup" onChange={onChange} value={value}>
              <Radio value={record.id}>选为目标档案</Radio>
            </Radio.Group>
          )}
        />
      </Table>
    </Modal>
  );
};
export default MergeDialog;
